<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-form-item label="病区" prop="wardAdmissionToName">
          <dept-vs-bed-list v-model="queryParams.wardCodeName" :clinical-sign-str="'3'"
                            :dept-id="queryParams.wardCode"
                            :org-id="userInfo.orgId" :placeholder="'请选择入院病区'"
                            style="width: 120px" @deptChange="wardChange"/>
        </el-form-item>
        <el-form-item label="摆药序号" prop="dispNo">
          <el-input
            v-model="queryParams.dispNo"
            clearable
            placeholder="请输入摆药序号"
            style="width: 120px"
            @keyup.enter="getPatientDispRecordFun"
          />
        </el-form-item>
        <el-form-item label="住院号" prop="hospitalNo">
          <el-input
            v-model="queryParams.hospitalNo"
            clearable
            placeholder="请输入住院号"
            style="width: 120px"
            @keyup.enter="getPatientDispRecordFun"
          />
        </el-form-item>
        <el-form-item label="床位号" prop="bedNo">
          <el-input
            v-model="queryParams.bedNo"
            clearable
            placeholder="请输入床位号"
            style="width: 120px"
            @keyup.enter="getPatientDispRecordFun"
          />
        </el-form-item>
        <el-form-item label="患者姓名" prop="name">
          <el-input
            v-model="queryParams.name"
            clearable
            placeholder="请输入患者姓名"
            style="width: 120px"
            @keyup.enter="getPatientDispRecordFun"
          />
        </el-form-item>
        <el-form-item label="摆药时间:" prop="admissionTime">
          <el-date-picker v-model="dateRange" :unlink-panels="true" end-placeholder="结束日期"
                          range-separator="截止" start-placeholder="开始日期" type="daterange"
                          @change="dispTimeChange"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <query-form-button @handleQuery="getPatientDispRecordFun" @resetQuery="resetQuery"/>
        </el-form-item>
        <el-form-item label="合计金额：" prop="costs">
          <span class="ys-css">{{ costs }} 元</span>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="药品汇总" name="0">
        <el-table v-adaptive="60" :border="true" :data="drugDispCollectList"
                  :header-cell-style="$headerCellStyle" :stripe="true"
                  highlight-current-row>
          <el-table-column :show-overflow-tooltip="true" align="center" label="摆药序号"
                           prop="dispNo"
                           width="160"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="摆药截止时间"
                           prop="thisDispTime"
                           width="160"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="所在病区"
                           prop="wardCodeName"
                           width="220"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="药品名称"
                           prop="itemName"
                           width="430"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="规格"
                           prop="packageSpec" width="180"/>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="数量"
                           width="140px">
            <template #default="scope">
              <template v-if="scope.row.usedQuantityMin > 0">
                <!--小包装-->
                <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.minUnits"
                               style="float: right"/>
                <div style="float: right;margin-right: 5px;font-weight: bold;">
                  {{ scope.row.usedQuantityMin }}
                </div>
              </template>
              <!--大包装-->
              <template v-if="scope.row.usedQuantityMax > 0">
                <dict-data-tag :options="dictDataMap['spec_unit']"
                               :value="scope.row.packageUnits"
                               style="float: right"/>
                <div style="float: right;margin-right: 5px;font-weight: bold;">
                  {{ scope.row.usedQuantityMax }}
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="单价(大包装)" prop="retailPrice" width="130">
            <template #default="scope">
                                    <span class="ret-ys-css">{{
                                        parseFloat(String(scope.row.itemPrice * scope.row.packageNum)).toFixed(2)
                                      }}</span>元
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="单价(小包装)" prop="retailPrice" width="130">
            <template #default="scope">
                                    <span class="ys-css">{{
                                        parseFloat(scope.row.itemPrice).toFixed(2)
                                      }}</span>元
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="金额" prop="itemRetailPriceShow" width="150">
            <template #default="scope">
              <span class="ys-css">{{ scope.row.itemRetailPriceShow }}</span>元
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                    :total="total" @pagination="getPatientDispRecordFun"/>
      </el-tab-pane>
      <el-tab-pane label="摆药明细" name="1">
        <el-table :border="true" :data="drugDispDetailList" :header-cell-style="$headerCellStyle"
                  :stripe="true" height="600"
                  highlight-current-row>
          <el-table-column :show-overflow-tooltip="true" align="center" label="摆药序号"
                           prop="dispNo"
                           width="160"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="摆药截止时间"
                           prop="thisDispTime"
                           width="160"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="住院号"
                           prop="hospitalNo"
                           width="120"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="患者姓名"
                           prop="name"
                           width="90"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="所在病区"
                           prop="wardCodeName"
                           width="220"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="药品名称"
                           prop="itemName"
                           width="430"/>
          <el-table-column :show-overflow-tooltip="true" align="center" label="规格"
                           prop="packageSpec" width="180"/>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="数量"
                           width="140px">
            <template #default="scope">
              <template v-if="scope.row.usedQuantityMin > 0">
                <!--小包装-->
                <dict-data-tag :options="dictDataMap['spec_unit']" :value="scope.row.minUnits"
                               style="float: right"/>
                <div style="float: right;margin-right: 5px;font-weight: bold;">
                  {{ scope.row.usedQuantityMin }}
                </div>
              </template>
              <!--大包装-->
              <template v-if="scope.row.usedQuantityMax > 0">
                <dict-data-tag :options="dictDataMap['spec_unit']"
                               :value="scope.row.packageUnits"
                               style="float: right"/>
                <div style="float: right;margin-right: 5px;font-weight: bold;">
                  {{ scope.row.usedQuantityMax }}
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="单价(大包装)" prop="retailPrice" width="130">
            <template #default="scope">
                                <span class="ret-ys-css">{{
                                    parseFloat(String(scope.row.itemPrice * scope.row.packageNum)).toFixed(2)
                                  }}</span>元
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="单价(小包装)" prop="retailPrice" width="130">
            <template #default="scope">
                                <span class="ys-css">{{
                                    parseFloat(scope.row.itemPrice).toFixed(2)
                                  }}</span>元
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="金额" prop="itemRetailPriceShow" width="150">
            <template #default="scope">
              <span class="ys-css">{{ scope.row.itemRetailPriceShow }}</span>元
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="detailTotal > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                    :total="total" @pagination="getPatientDispRecordFun"/>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script lang="ts" setup>

import {getPatientDisDispRecordDetail, getPatientDispRecord} from "@/api/drug/drugDispRecord.ts"
import {useDictStoreHook} from "@/store/modules/dict";
import {useUserStoreHook} from "@/store/modules/user.ts";

const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo
const dictStore = useDictStoreHook();
let dictDataMap = ref(dictStore.isTypeGetData('spec_unit', 'medical_way', 'order_type'))
const {proxy} = getCurrentInstance() as any
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const dateRange = ref([date + "00:00:00", date + "23:59:59"]);
// 总条数
const total = ref(0)
const detailTotal = ref(0)
const costs = ref(0)
const drugDispCollectList = ref([])
// 摆药明细list
const drugDispDetailList = ref([])
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 10,
  orgId: userInfo.orgId
})
const queryParamsRef = ref()
const activeName = ref<string>("0")

function handleClick(tab, _event) {
  activeName.value = tab.props.name
  getPatientDispRecordFun()
}

function wardChange(obj) {
  queryParams.value.wardCodeName = obj.wardCodeName
  queryParams.value.wardCode = obj.wardCode
  getPatientDispRecordFun()
}

function getPatientDispRecordFun() {
  if (!queryParams.value.wardCode) {
    return ElMessage.error("请选择病区后再查询。")
  }
  if (activeName.value === '0') {
    getPatientDispRecordApiFun()
  } else {
    getPatientDisDispRecordDetailFun()
  }
}

/**
 * 摆药记录汇总查询
 */
function getPatientDispRecordApiFun() {
  getPatientDispRecord(proxy.$addDateRange(queryParams.value, dateRange.value)).then((res: resType) => {
    if (res.data) {
      let result = res.data.result
      result.records.forEach(item => {
        let itemRetailPriceShow = Number(item.amount * item.itemPrice)
        item.itemRetailPriceShow = itemRetailPriceShow.toFixed(2)
        item.usedQuantityMax = Math.floor(item.amount / item.packageNum)
        item.usedQuantityMin = item.amount % item.packageNum
      })
      drugDispCollectList.value = result.records
      total.value = result.total || 0
    }
    costs.value = res.data.costs || 0
  })
}

/**
 * 摆药记录明细查询
 */
function getPatientDisDispRecordDetailFun() {
  getPatientDisDispRecordDetail(proxy.$addDateRange(queryParams.value, dateRange.value)).then((res: resType) => {
    if (res.data) {
      let result = res.data.result
      result.records.forEach(item => {
        let itemRetailPriceShow = Number(item.amount * item.itemPrice)
        item.itemRetailPriceShow = itemRetailPriceShow.toFixed(2)
        item.usedQuantityMax = Math.floor(item.amount / item.packageNum)
        item.usedQuantityMin = item.amount % item.packageNum
      })
      drugDispDetailList.value = result.records
      detailTotal.value = result.total || 0
    }
    costs.value = res.data.costs || 0
  })
}

function resetQuery() {
  queryParamsRef.value.resetFields()
  queryParams.value.wardAdmissionTo = ""
  queryParams.value.wardAdmissionToName = ""
  getPatientDispRecordFun()
}

function dispTimeChange(e) {
  if (e) {
    dateRange.value = [proxy.$parseTime(e[0], "{y}-{m}-{d} 00:00:00"), proxy.$parseTime(e[1], "{y}-{m}-{d} 23:59:59")]
  }
  getPatientDispRecordFun()
}
</script>

<script lang="ts">
export default {
  name: "DrugDispRecord"
}
</script>
<style scoped>
:deep(.el-tabs--border-card>.el-tabs__content) {
  padding-bottom: 40px !important;
}
</style>
